<template>
  <div class="logo">
    <div class="title-wrap">
      <!-- <img src="@/assets/images/daLOGO.png" /> -->
    </div>
    <div class="login-title">欢迎登录！</div>
    <div class="login-field">
      <img src="@/assets/images/zhanghao.png" />
      <van-field v-model="username" placeholder="请输入用户名" />
    </div>
    <div class="login-field">
      <img src="@/assets/images/mima.png" />
      <van-field type="password" v-model="password" placeholder="请输入密码" />
    </div>
    <div class="login-field">
      <van-button type="info" size="large" :disabled="isDisabled" @click="login">登录</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },
  computed: {
      isDisabled(){
          return !(this.username && this.password)
      }
  },
  methods: {
    login(){
        this.$api.keyPost('/rest/user/login', {name: this.username, password: this.password}).then(res => {
          if (res && res.code === 0) {
            this.$router.push("/query")
          } else if (res && res.code === 500) {
            this.$toast(res.msg);
          }
        })
    }
  },
};
</script>

<style scoped>
.logo {
  width: 100vw;
  height: 100vh;
}

.login-title {
  font-size: 48px;
  font-weight: 600;
  color: rgba(16, 16, 16, 1);
  line-height: 54px;
  margin: 50px 60px;
}
.title-wrap {
  width: 630px;
  height: 164px;
}
.title-wrap img {
  width: 630px;
  height: 114px;
  margin: 50px;
}
.login-field {
  display: flex;
  align-items: center;
  margin: 60px;
  background: rgba(248, 248, 248, 1);
  border-radius: 16px;
  overflow: hidden;
}
.login-field img {
  width: 44px;
  height: 44px;
  margin: 34px 38px;
}
.van-cell {
  background-color: transparent;
}
</style>
